<template>
  <div class="leader-work">
    <div class="flex-item flex-row" style="height: 0; margin-bottom: 10px">
      <div class="flex-item" style="width: 0; margin-right: 10px">
        <HomeCard icon="el-icon-time" title="我的待办事项" :badge="myTotal">
          <template #header-right>
            <div class="more" @click="$router.push('/allToDOS')">更多<i class="el-icon-arrow-right"></i></div>
          </template>
        </HomeCard>
      </div>
      <div class="flex-not-shrink" style="width: 30%">
        <HomeCard icon="el-icon-bell" title="系统消息" :badge="systemNotificationTotal">
          <template #header-right>
            <div class="more" @click="$router.push('/systemMessage')">更多<i class="el-icon-arrow-right"></i></div>
          </template>
        </HomeCard>
      </div>
    </div>
    <div class="flex-not-shrink" style="height: 50%">
      <HomeCard icon="fa-sitemap fa" title="部门待办事项" :badge="departmentTotal">
        <template #header-right>
          <div class="more" @click="$router.push('/allToDOS/bm')">更多<i class="el-icon-arrow-right"></i></div>
        </template>
      </HomeCard>
    </div>
  </div>
</template>

<script>
  import HomeCard from '@/views/module/home/HomeCard'

  export default {
    name: 'LeaderWork',
    components: { HomeCard },
    data() {
      return {
        myTotal: 0,
        departmentTotal: 0,
        systemNotificationTotal: 0
      }
    }
  }
</script>

<style lang="scss">
  .leader-work {
    @include flex-column;
    height: 100%;
    padding-bottom: 10px;

    .home-card-body {
      position: relative;
    }

    .home-card-body {
      padding: 10px;
    }
  }
</style>
